<template>
  <div class='mobile-picSelect-wrapper'>
    <!-- 【注】 valid-tip-box 类名将作为paper页面的DOM索引，不能修改 -->
    <div class='valid-tip-box'
         v-if='question.validType === "required"'>
      请<span v-show='question.isMulti'>至少</span>选择一个选项
    </div>
    <!-- 单选 -->
    <ul class='picSelect-list' v-if='!question.isMulti'>
      <li class='option-item'
          v-for='(option, index) of question.optionList'
          :key='index'
          :class='{
            paperActive:option.isSelected && (!isRecord || (isRecord && !question.useAnswer)),
            recordActive:option.isSelected && isRecord && question.useAnswer,
            recordCorrect:(option.isResult === 1 || hasNoAnswer) && isRecord && question.useAnswer,
            recordError:(option.isResult === 0 && !hasNoAnswer) && option.isSelected && isRecord && question.useAnswer
          }'
          @click='selectOption(option)'>
        <div class='item-img' :style='{backgroundImage: `url(${option.imgUrl})`}'></div>
        <div class='item-img-preview survey-tool-sprite-bg' @click.stop='previewPic(index)'></div>
        <div class='item-content'>
          <div class='option-circle'></div>
          <div class='option-content' v-html='option.title'></div>
        </div>
      </li>
    </ul>
    <!-- 多选 -->
    <ul class='picSelect-list' v-if='question.isMulti'>
      <li class='option-item'
          v-for='(option, index) of question.optionList'
          :key='index'
          :class='{
            paperActive:option.isSelected && (!isRecord || (isRecord && !question.useAnswer)),
            recordActive:option.isSelected && isRecord && question.useAnswer,
            recordCorrect:(option.isResult === 1 || hasNoAnswer) && isRecord && question.useAnswer,
            recordError:(option.isResult === 0 && !hasNoAnswer) && option.isSelected && isRecord && question.useAnswer
          }'
          @click='toggleOption(option)'>
        <div class='item-img' :style='{backgroundImage: `url(${option.imgUrl})`}'></div>
        <div class='item-img-preview survey-tool-sprite-bg' @click.stop='previewPic(index)'></div>
        <div class='item-content'>
          <div class='option-square'></div>
          <div class='option-content' v-html='option.title'></div>
        </div>
      </li>
    </ul>
    <!-- 答案相关 -->
    <div class='qa-answer'
         v-if='isRecord && question.useAnswer'>
      <!-- 分数 -->
      <div class='qa-score-wrapper'>
        <div class='score-label'>分值：</div>
        <div class='score-number'>{{question.score || 0}}分</div>
      </div>
      <!-- 答案解析 -->
      <div class='qa-answer-parse'
           v-if='question.useAnswer && question.answerParse'>
        <div class='answer-title'>答案解析：</div>
        <div class='answer-content' v-html='question.answerParse'></div>
      </div>
    </div>
    <!-- 图片预览 -->
    <div class='pic-preview-wrapper'
         v-if='isPreviewPic'
         @touchmove.stop='forbitScroll'>
      <div class='preview-close iconfont' @click='closePreview'>&#xe623;</div>
      <swiper :options="swiperOption">
        <swiper-slide v-for='(option, index) of question.optionList' :key='"pic" + index'>
          <div class='pic-item'
               :style='{backgroundImage: `url(${option.imgUrl})`}'>
          </div>
        </swiper-slide>
      </swiper>
      <div class='preview-pagination'>
        （{{currPicIndex}}/{{question.optionList.length}}）{{currPicTitle}}
      </div>
    </div>
  </div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
export default {
  name: 'mobilePicSelect',
  data () {
    let that = this
    return {
      swiperOption: {
        // 设定初始化时slide的索引
        initialSlide: 0,
        // Slides的滑动方向，可设置水平(horizontal)或垂直(vertical)
        direction: 'horizontal',
        // 环状轮播
        loop: false,
        slidesPerView: 'auto',
        loopedSlides: 3,
        loopAdditionalSlides: 0,
        // 滑动之后回调函数
        on: {
          slideChangeTransitionStart: function () {
            that.currPicIndex = this.realIndex + 1
            that.currPicTitle = that.formatDetail(that.question.optionList[this.realIndex].title)
          }
        }
      },
      isPreviewPic: false,
      currPicIndex: 1,
      currPicTitle: '',
      hasNoAnswer: false // 是否没有设置答案
    }
  },
  components: {
    swiper,
    swiperSlide
  },
  props: {
    question: {
      type: Object,
      default () {
        return {}
      }
    },
    isRecord: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    forbitScroll (e) {
      e.preventDefault()
    },
    resetValidType () {
      this.question.validType = ''
    },
    // 单选
    selectOption (opt) {
      if (this.isRecord) {
        return false
      }
      this.resetValidType()
      this.question.optionList.forEach(option => {
        if (option.optionId === opt.optionId) {
          option.isSelected = true
        } else {
          option.isSelected = false
        }
      })
    },
    // 多选
    toggleOption (opt) {
      if (this.isRecord) {
        return false
      }
      this.resetValidType()
      // 如果是选中该选项，需要判断最大选择个数
      if (this.question.selectLimit) {
        if (!opt.isSelected) {
          let selectedOptions = this.question.optionList.filter(opt => opt.isSelected)
          if (selectedOptions.length >= this.question.selectLimit) {
            return false
          }
        }
      }
      opt.isSelected = !opt.isSelected
    },
    closePreview () {
      this.isPreviewPic = false
    },
    previewPic (index) {
      this.swiperOption.initialSlide = index
      if (index === 0) {
        this.currPicIndex = 1
        this.currPicTitle = this.formatDetail(this.question.optionList[0].title)
      }
      this.isPreviewPic = true
    },
    formatDetail (description) {
      return description.replace(/<.*?>/g, '').slice(0, 30)
    },
    init () {
      // 如果是查看记录模式, 回显答题记录
      if (this.isRecord) {
        if (this.question.answer) {
          // let optionResults = this.question.answer.optionResults
          let optionResults = this.question.answer
          this.question.optionList.forEach(option => {
            let targetOption = optionResults.filter(item => item.optionId === option.optionId)[0]
            if (targetOption) {
              option.isSelected = true
            } else {
              option.isSelected = false
            }
          })
        }
        let answerList = this.question.optionList.filter(option => option.isResult === 1)
        if (answerList.length === 0) {
          this.hasNoAnswer = true
        }
      }
    }
  },
  created () {
    this.init()
  }
}
</script>

<style lang="stylus" scoped>
.mobile-picSelect-wrapper
  margin-top 10px
  .valid-tip-box
    color #ef6262
    font-size 14px
    margin-bottom 5px
  .picSelect-list
    display flex
    flex-wrap wrap
    align-items flex-start
    .option-item
      width calc((100% - 12px)*0.5)
      margin-right 12px
      margin-bottom 12px
      border 1px solid #dde5ed
      border-radius 4px
      display flex
      flex-direction column
      box-sizing border-box
      overflow hidden
      transform rotate(0)
      cursor pointer
      &:nth-of-type(2n)
        margin-right 0
      &.paperActive
        background rgba(38, 114, 255, 0.1)
        border-color #2672ff
      &.recordCorrect
        background rgba(33, 166, 90, 0.1)
        border-color #21a65a
      &.recordError
        background rgba(182, 44, 44, 0.1)
        border-color #b62c2c
      &.paperActive, &.recordActive
        .item-content
          .option-circle
            position relative
            border-color #2672ff
            &::after
              content ''
              position absolute
              left 0
              right 0
              top 0
              bottom 0
              margin auto
              display block
              width 10px
              height 10px
              background #2672ff
              border-radius 50%
          .option-square
            position relative
            border-color #2672ff
            &::after
              content: "";
              display: inline-block;
              width: 7px;
              height: 13px;
              border-right-style: solid;
              border-bottom-style: solid;
              border-right-width: 3px;
              border-bottom-width: 3px;
              border-color #2672ff
              transform: rotate(45deg) scale(0.7) translate3d(-2px, -5px, 0);
      .item-img
        display block
        width 100%
        padding-bottom 100%
        bgCover()
      .item-img-preview
        position absolute
        right 5px
        top 5px
        width 22px
        height 22px
        cursor pointer
        background-position -81px -22px
      .item-content
        display flex
        align-items center
        padding 10px
        .option-circle
          flex none
          width 14px
          height 14px
          border 1px solid #dde5ed
          border-radius 50%
          margin-right 10px
        .option-square
          flex none
          width 14px
          height 14px
          border 1px solid #dde5ed
          margin-right 10px
        .option-content
          flex 1
          width 0
          line-height 1.4
          font-size 14px
          >>> img, >>> iframe, >>> video
            max-width 100%
  .qa-answer
    margin 15px 0 10px
    border-top 1px dashed #dde5ed
    .qa-score-wrapper
      border-bottom 1px dashed #dde5ed
      padding 10px
      display flex
      align-items center
      .score-label
        font-size 14px
        color #333
      .score-number
        font-size 14px
        color #aaa
    .qa-answer-parse
      border-bottom 1px dashed #dde5ed
      border-radius 4px
      padding 10px
      .answer-title
        font-size 14px
        color #333
        margin-bottom 10px
      .answer-content
        font-size 14px
        line-height 1.5
        color #aaa
        >>> img, >>> iframe, >>> video
          max-width 100% !important
  .pic-preview-wrapper
    position fixed
    top 0
    bottom 0
    left 0
    right 0
    z-index 100
    background rgba(0,0,0,0.8)
    .preview-close
      position: absolute;
      right: 10px;
      top: 10px;
      padding: 6px;
      text-align center
      font-size: 14px;
      border-radius: 50%
      color rgba(255,255,255,0.7)
      cursor pointer
    .preview-pagination
      position absolute
      left 0
      right 0
      bottom 0
      height 40px
      line-height 40px
      background rgba(0,0,0,0.7)
      color #fff
      text-align center
      no-wrap()
      font-size 14px
    >>> .swiper-container
      position absolute
      top 50%
      left 0
      right 0
      transform translateY(-50%)
      .pic-item
        width 100%
        padding-bottom 100%
        bgCover()
</style>
